﻿@inject IPageHeadBuilder pagebuilder
@model CustomerLoyaltyPointsModel
@{
    Layout = "_TwoColumns";

    //title
    pagebuilder.AddTitleParts(Loc["Title.Account"]);
}

@section left
{
    @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = AccountNavigationEnum.LoyaltyPoints })
}

<section class="page account-page loyalty-points-page pl-lg-3 pt-3 pt-lg-0">
    <h1 class="h2 generalTitle">@Loc["Account.MyAccount"] - @Loc["Account.LoyaltyPoints"]</h1>
    <div class="loyalty-points-overview">
        <div class="current-balance alert alert-success">@Loc["LoyaltyPoints.CurrentBalance", Model.LoyaltyPointsBalance, Model.LoyaltyPointsAmount]</div>
        @if (Model.MinimumLoyaltyPointsBalance > 0)
        {
            <div class="min-balance alert alert-danger">@Loc["LoyaltyPoints.MinimumBalance", Model.MinimumLoyaltyPointsBalance, Model.MinimumLoyaltyPointsAmount]</div>
        }
    </div>
    <div class="loyalty-points-history">
        <h5>
            <strong>@Loc["LoyaltyPoints.History"]</strong>
        </h5>
        @if (Model.LoyaltyPoints.Any())
        {
            <div id="customer-loyalty-points" class="table-responsive">
                <table class="table">
                    <thead role="rowgroup">
                    <tr role="row">
                        <th role="columnheader">
                            <div>@Loc["LoyaltyPoints.Fields.Date"]</div>
                        </th>
                        <th role="columnheader">
                            <div>@Loc["LoyaltyPoints.Fields.Points"]</div>
                        </th>
                        <th role="columnheader">
                            <div>@Loc["LoyaltyPoints.Fields.PointsBalance"]</div>
                        </th>
                        <th role="columnheader">
                            <div>@Loc["LoyaltyPoints.Fields.Message"]</div>
                        </th>
                    </tr>
                    </thead>
                    <tbody role="rowgroup">
                    @for (var i = 0; i < Model.LoyaltyPoints.Count; i++)
                    {
                        var item = Model.LoyaltyPoints[i];
                        <tr role="row">
                            <td>
                                <div>
                                    @item.CreatedOn
                                </div>
                            </td>
                            <td>
                                <div>
                                    @item.Points
                                </div>
                            </td>
                            <td>
                                <div>
                                    @item.PointsBalance
                                </div>
                            </td>
                            <td>
                                <div>
                                    @item.Message
                                </div>
                            </td>
                        </tr>
                    }
                    </tbody>
                </table>
            </div>
        }
        else
        {
            <section class="no-data alert alert-info my-3">
                @Loc["LoyaltyPoints.NoHistory"]
            </section>
        }
    </div>
</section>